<script setup lang='ts'>
import { computed, ref,onMounted } from 'vue'
import { NCard,NTag,NSelect,NDatePicker,NFormItem,NInput,NModal, NTabPane, NTabs,useMessage,NTable,NPagination,NForm,NButton } from 'naive-ui'
import { SvgIcon } from '@/components/common'
import { t } from '@/locales';
import { useBasicLayout } from '@/hooks/useBasicLayout'
import {showMe} from '@/components/common'
const { isMobile } = useBasicLayout()
interface Props {
  visible: boolean
}

interface Emit {
  (e: 'update:visible', visible: boolean): void
}
const props = defineProps<Props>()

const emit = defineEmits<Emit>()

const show = computed({
  get() {
    return props.visible
  },
  set(visible: boolean) {
    emit('update:visible', visible)
  },
})
const modalStyle = computed(() => {
    if(!isMobile){
        return "width: 100%;"
    }
    return "width: 50%;"
})
const showMeVisible = ref(false)

</script>

<template>

  <NModal v-model:show="show" title="选购商品"    :auto-focus="false" preset="card" style="width: 95%; max-width: 640px;" >
		<div style=" display: flex; overflow: auto;
			justifyContent: center;
			alignItems: center;">
			<n-card   embedded
								:bordered="false">
				<template #cover>
					<img src="http://chosen1.xyz/chu1.jpeg">
				</template>
				<br>
				<div class="n-card__content" role="none"><div>
					<div class="flex justify-between items-end min-h-28"><div>
<!--						<span class="text-sm font-bold mr-1">model-3.5-turbo</span><span class="font-bold">20次</span><br>-->
						<span class="text-sm font-bold mr-1">model-4/32k额度</span><span style="color: green" class="font-bold"><b>3美元</b></span>
					</div><!---->
					</div>
					<div class="flex justify-between items-end min-h-28">
					</div>
					<div @click=" showMeVisible = true " class="flex justify-between items-end mt-5">
						<i class="text-xl text-[red] font-bold">10元</i>
						<NButton class="n-button n-button&#45;&#45;primary-type n-button&#45;&#45;small-type n-button&#45;&#45;dashed"   >
							购买套餐
						</NButton>
					</div>
				</div>
				</div>
			</n-card>
			<n-card   embedded
								:bordered="false">
				<template #cover>
					<img src="http://chosen1.xyz/chu2.png">
				</template>
				<br>
				<div class="n-card__content" role="none"><div>
					<div class="flex justify-between items-end min-h-28"><div>
<!--						<span class="text-sm font-bold mr-1">model-3.5-turbo</span><span class="font-bold">50次</span><br>-->
						<span class="text-sm font-bold mr-1">model-4/32k额度</span><span style="color: green" class="font-bold"><b>6美元</b></span>
					</div><!---->
					</div>
					<div class="flex justify-between items-end min-h-28">
					</div>
					<div @click=" showMeVisible = true " class="flex justify-between items-end mt-5">
						<i class="text-xl text-[red] font-bold">16元</i>
						<NButton class="n-button n-button&#45;&#45;primary-type n-button&#45;&#45;small-type n-button&#45;&#45;dashed"   >
							购买套餐
						</NButton>
					</div>
				</div>
				</div>
			</n-card>
			<n-card   embedded
								:bordered="false">
				<template #cover>
					<img src="http://chosen1.xyz/chu3.png">
				</template>
				<br>
				<div class="n-card__content" role="none"><div>
					<div class="flex justify-between items-end min-h-28"><div>
<!--						<span class="text-sm font-bold mr-1">model-3.5-turbo</span><span class="font-bold" style="color: blue">100次</span><br>-->
						<span class="text-sm font-bold mr-1">model-4/32k额度</span><span style="color: green" class="font-bold"><b>10美元</b></span>
					</div>
					</div>
					<div class="flex justify-between items-end min-h-28">
					</div>
					<div @click=" showMeVisible = true " class="flex justify-between items-end mt-5">
						<i class="text-xl text-[red] font-bold">25元</i>
						<NButton   class="n-button n-button&#45;&#45;primary-type n-button&#45;&#45;small-type n-button&#45;&#45;dashed"   >
							购买套餐
						</NButton>
					</div>
				</div>
				</div>
			</n-card>
		</div>
  </NModal>

	<showMe v-model:visible="showMeVisible" />
</template>
